<!-- 业务测算表  -->
<template>
<div class="paymentnotice">


  <div class="head">
      <export-excel module-name="businessform_paymentnotice" file-name="付款通知单.xlsx"></export-excel>
    <h2>付款通知单</h2>
  </div>


   <div class="head-1">
      <img class="tcf-png" src="../../../../assets/img/tcf.png" alt="">
      <p style="font-weight:bolder;"> TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
      <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
      <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA"</p>
      <p></p>
    </div>


    <div class="contract">
      <h1> 
          Payment Notice
      </h1>
      <div class="clearfix">
        <div class="contract-order">
          <el-form label-width="80px">
            <el-form-item label="编号NO:">
              <input class="address-input relate-color " placeholder="请输入相关内容" :readonly="!editable"  v-model="bpn_no" @input="handleSimpleInput('bpn_no', $event)" />
            </el-form-item>

            <el-form-item label="日期Date:">
              <el-date-picker class="relate-color " v-model="bpn_date" value-format="yyyy-MM-dd" :readonly="!editable" @change="selectDate" ></el-date-picker>
            </el-form-item>

          </el-form>
        </div>
      </div>


        <el-form label-width="120px">
          <el-form-item label="买方BUYER:">
            <input class="address-input relate-color "  placeholder="请输入相关内容"  :readonly="!editable" 
            v-model="bpn_buyerName" @input="handleSimpleInput('bpn_buyerName', $event)" />
          </el-form-item>

          <el-form-item label="地址ADDRESS:">
            <input class="address-input relate-color "  placeholder="请输入相关内容"  :readonly="!editable" 
            v-model="bpn_buyerAddress" @input="handleSimpleInput('bpn_buyerAddress', $event)" />
          </el-form-item>
        </el-form>

        <div class="contract-seller">
            <p><span>卖方SELLER:</span>天津金贸链进出口有限公司</p>
            <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
            <p><span>地址ADDERSS:</span>天津自贸试验区（空港经济区）环河南路88号2-2205号</p>
            <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
            <p><span>电话TEL:</span> 010-50911255 传真FAX: 010-50911288 邮箱EMAIL: </p>
        </div>
    </div>

    <div class="table">
        <p class="table-title">
            Ⅰ. 买方向卖方采购下列货物,详细信息如下;The buyer purchases the following goods from the seller, and the details are as follows:
        </p>


          <el-table :data="bpn_table1"  border style="width: 100%">
          <el-table-column label="序号">
            <el-table-column type="index" label="NO" :index="indexMethod"></el-table-column>
          </el-table-column>

          <el-table-column label="Products" min-width="100">
            <el-table-column prop="bpn_table1_product" label="">
              <template slot-scope="scope">
                <span  class="cell-edit-input">
                    <input placeholder="请输入相关内容"  :readonly="!editable" @input="handleTableInput(scope, 'bpn_table1_product', $event)" v-model="scope.row.bpn_table1_product" />
                </span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="MODEL" min-width="100">
            <el-table-column prop="bpn_table1_description" label="">
              <template slot-scope="scope">
                <span  class="cell-edit-input">
                    <input placeholder="请输入相关内容"  :readonly="!editable" @input="handleTableInput(scope, 'bpn_table1_description', $event)"   v-model="scope.row.bpn_table1_description"/>
                </span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="QUANTITY" min-width="100">
            <el-table-column prop="bpn_table1_quantity" label="PCS">
              <template slot-scope="scope">
                <span  class="cell-edit-input">
                  <input type="number" placeholder="请输入相关内容" :readonly="!editable" @input="handleTableInput(scope, 'bpn_table1_quantity', $event)"  v-model="scope.row.bpn_table1_quantity"  :min="0" />
                </span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="Unit Price"  min-width="100" >
            <el-table-column prop="bpn_table1_price" label="RMB">
              <template slot-scope="scope">
                <span  class="cell-edit-input">
                  <input type="number"  :readonly="!editable" placeholder="请输入相关内容" v-model="scope.row.bpn_table1_price" @input="handleTableInput(scope, 'bpn_table1_price', $event)" :min="0" />
                </span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="Total Price" min-width="100">
            <el-table-column prop="bpn_table1_lineAmount" label="RMB">
              <template slot-scope="scope">
                <span  class="cell-edit-input">
                  <input placeholder="请输入相关内容"  :readonly="!editable" @input="handleTableInput(scope, 'bpn_table1_lineAmount', $event)"  v-model="scope.row.bpn_table1_lineAmount" />
                </span>
              </template>
            </el-table-column>
          </el-table-column>


          <el-table-column v-if="editable" label="操作" width="100">
            <template slot-scope="scope">
            <el-button @click="addNewLine(scope.$index, bpn_table1, $event)" type="text" size="small">添加</el-button>
            <el-button @click="removeCurrentLine(scope.$index, bpn_table1, $event)" type="text" size="small">移除</el-button>
          </template>
          </el-table-column>
        </el-table>
    </div>

   
    <div class="extra-table">
         <el-row class="extra-money">
            <el-col :span="8"><div>Total</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8">
              <input type="number" :min="0" v-model="bpn_table1_amount" @input="handleSimpleInput('bpn_table1_amount', $event)"/>
            </el-col>
         </el-row>
          <el-row class="extra-money">
            <el-col :span="8"><div>Deposit定金</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8"><input v-model="bpn_depositMoney" @input="handleSimpleInput('bpn_depositMoney', $event)"/></el-col>
         </el-row>

        <el-row class="extra-money">
            <el-col :span="8"><div>Balance 尾款</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8"><div><input v-model="bpn_balanceMoney" @input="handleSimpleInput('bpn_balanceMoney', $event)"/></div></el-col>
         </el-row>
    </div>

    <div class="other">
        <p>
            Ⅲ.收款公司信息. Beneficiary bank information.								
        </p>
        <el-row>
            <el-col :span="5">
                <span>
                    收款人Beneficiary：	
                </span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容"  :readonly="!editable"
                 v-model="bpn_beneficiary" @input="handleSimpleInput('bpn_beneficiary', $event)"
                />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>
                   收款账号Account No.: 	
               </span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容"  :readonly="!editable"
                v-model="bpn_bankAccount" @input="handleSimpleInput('bpn_bankAccount', $event)"
                />
            </el-col>
        </el-row>

         <el-row>
            <el-col :span="5">
                <span>
                    收款人地址Address: 	
                </span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容"  :readonly="!editable"
                 v-model="bpn_bankAddress" @input="handleSimpleInput('bpn_bankAddress', $event)"
                />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>
                   收款银行Bank：	
               </span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容"  :readonly="!editable"
                 v-model="bpn_beneficiaryBankName" @input="handleSimpleInput('bpn_beneficiaryBankName', $event)"
                />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>
                   银行地址Bank address: 	
               </span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" :readonly="!editable"
                 v-model="bpn_bankAddress" @input="handleSimpleInput('bpn_bankAddress', $event)"
                />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>
                   银行代码SWIFT CODE: 	
               </span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" :readonly="!editable"
                v-model="bpn_swiftBic" @input="handleSimpleInput('bpn_swiftBic', $event)"
                />
            </el-col>
        </el-row>



    </div>

</div>

</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js';
import {toFixed} from '@/util/transform.js';
import {handleEmit} from '../common.js';
import exportExcel from '../../common/exportExcel.vue';

export default {

  created(){
      const self = this;
      
      this.keys.forEach(key => {
          this[key] = _.cloneDeep(this.datas[key]);
      });


      this.bus.$on('paymentnotice-date', function(arg){
          self.bpn_date = arg[0];
          self.emitToParent();
      });

      this.bus.$on('paymentnotice-order-number', function(arg){
          self.bpn_no = arg[0];
          self.emitToParent();
      });

      this.bus.$on('paymentnotice-buyer-address', function(arg){
          self.bpn_buyerAddress = arg[0];
          self.emitToParent();
      });

      this.bus.$on('paymentnotice-buyer-mesg', function(arg){
          self.bpn_buyerAddress = arg[0].bf_buy_address;
          self.bpn_buyerName = arg[0].bf_buy_name;
          self.bpn_no = arg[0].bf_orderNumber;
          self.emitToParent();
      });

      this.bus.$on('paymentnotice-table', function(arg){
        let index = arg[1];
        let srcData = arg[2];

        if (arg[0] === 'add') {
           //添加
            let  data = {
                bpn_table1_product: srcData.bf_table1_product,
                bpn_table1_description: srcData.bf_table1_description,
                bpn_table1_quantity: srcData.bf_table1_quantity,
                bpn_table1_price: srcData.bf_table1_price,
                bpn_table1_lineAmount: srcData.bf_table1_lineAmount
            }; 

          if ((index - self.bpn_table1.length) >= 1) {
            self.bpn_table1.push(data);
            } else {
            self.bpn_table1.splice(index, 0, data);
            }

        } else if(arg[0] === 'delete'){
            //删除
            if (self.bpn_table1.length - 1 >= index) {
            self.bpn_table1.splice(index, 1);
            }
        }

        self.bpn_table1_amount = self.computedTableTotal(self.bpn_table1)
        self.emitToParent();
      });


      this.bus.$on('paymentnotice-table-line', function(arg){
    
        let lineIndex = arg[0], key = self.prevMapCur[arg[1]];
        let srcData = arg[2];

        //表格有该索引时，才进行修改
        if (lineIndex  <= (self.bpn_table1.length - 1)) {
            let temp = _.cloneDeep(self.bpn_table1[lineIndex]);
            temp[key] = srcData;

            // if (key === "bpn_table1_price" || key === "bpn_table1_quantity") {
            //   temp.bpn_table1_lineAmount = toFixed(Number(temp.bpn_table1_quantity) * Number(temp.bpn_table1_price));
            //   self.bpn_table1.splice(lineIndex, 1, temp);
            //   self.bpn_table1_amount = self.computedTableTotal(self.bpn_table1);
            // } else if (key === "bpn_table1_lineAmount") {
            //   self.bpn_table1_amount = self.computedTableTotal(self.bpn_table1);
            // } else {
            //   self.bpn_table1.splice(lineIndex, 1, temp);
            // }

            if (key === 'bpn_table1_price'){
              temp[key]  =  toFixed(srcData);
              temp.bpn_table1_lineAmount = toFixed(Number(temp.bpn_table1_quantity) * Number(temp.bpn_table1_price));
              self.bpn_table1.splice(lineIndex, 1, temp);
              self.bpn_table1_amount = self.computedTableTotal(self.bpn_table1);
              
            } else if (key === 'bpn_table1_quantity'){
              temp[key]  =  Number.isNaN(parseInt(srcData).toString()) ? '0' : parseInt(srcData).toString();
              temp.bpn_table1_lineAmount = toFixed(Number(temp.bpn_table1_quantity) * Number(temp.bpn_table1_price));
              self.bpn_table1.splice(lineIndex, 1, temp);
              self.bpn_table1_amount = self.computedTableTotal(self.bpn_table1);

            } else if (key === 'bpn_table1_lineAmount'){
              temp[key] = toFixed(srcData);
              self.bpn_table1.splice(lineIndex, 1, temp);
              self.bpn_table1_amount = self.computedTableTotal(self.bpn_table1);
              
            } else {
                self.bpn_table1.splice(lineIndex, 1, temp);
            }


            self.emitToParent();
        }         
      });



  },

  methods: {

     /**
     * 数据发生改变时，通知父组件
     */
    emitToParent(){
      let newData = {};
      this.keys.forEach(key => {
        newData[key] = _.cloneDeep(this[key]);
      });
      this.$emit("fromPN", "businessform_paymentnotice", newData);
    },

     /**
     *  数据更新之后 通知需要关联的组件
     * @param {String} eventName
     * @param {String} option
     * @param {Array} value
     */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },

     /**
     * 处理其他 input  输入
     * @param {Object} scope  表格的scope
     * @param {String} key   字段名称
     */
    handleSimpleInput(key, event){
    
      if (key === 'bpn_table1_amount' || key === 'bpn_depositMoney' ||  key === 'bpn_balanceMoney' ) {
        if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
        this[key] =  event.target.value;
        } else {
        this[key] =  toFixed(event.target.value);
        }
      }

      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },

    /**
     * 表格输入处理
     * @param {Object} scope  表格的scope
     * @param {String} key   字段名称
     * @param {Object} event  dom事件
     */
    handleTableInput(scope, key, event){
        let oldData = _.cloneDeep(this.bpn_table1[scope.$index]);

        switch(key) {
            case 'bpn_table1_price':
              if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
                oldData[key] =  event.target.value;
                } else {
                oldData[key] =  toFixed(event.target.value);
                }
              oldData.bpn_table1_lineAmount = toFixed(oldData.bpn_table1_price * oldData.bpn_table1_quantity);
              this.bpn_table1.splice(scope.$index, 1, oldData);
              this.bpn_table1_amount = this.computedTableTotal(this.bpn_table1);
              break;
            case 'bpn_table1_quantity':
              oldData[key] =  Number.isNaN(parseInt(event.target.value).toString()) ? '0' : parseInt(event.target.value).toString();
              oldData.bpn_table1_lineAmount = toFixed(oldData.bpn_table1_price * oldData.bpn_table1_quantity);
              this.bpn_table1.splice(scope.$index, 1, oldData);
              this.bpn_table1_amount = this.computedTableTotal(this.bpn_table1);
              break;
            
            case 'bpn_table1_lineAmount': 
              this.bpn_table1_amount = this.computedTableTotal(this.bpn_table1);
              break;
        }

        handleEmit(null, ()=> {
          //通知父组件
          this.emitToParent();
        });
    },

    /**
     * 计算表格的金额 总和
     * @param {Array} table
     * @return {String} 
     */
    computedTableTotal(table){
        let amounts = 0;
        table.forEach(line => {
          amounts += Number(line.bpn_table1_lineAmount);
        });

        amounts = Number.isNaN(amounts) ? 0  : amounts;
        return toFixed(amounts);
    },


    selectDate(value){
      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },


    indexMethod(index) {
      let lines = this.bpn_table1.length;
      return index + 1;
    },

     addNewLine(currentIndex, table){
       let keys = [
            "bdp_table1_item",
            "bdp_table1_desc",
            "bdp_table1_lineAmount"
        ];

        let lastLine = _.cloneDeep(table[currentIndex]), newLine = {};

        keys.forEach(key => {
            newLine[key] = lastLine[key];
        });

        table.splice(currentIndex + 1, 0, newLine);
        this.computeTableTotalAmount();

        handleEmit(null, () => {
            this.emitToParent();
        });
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 1){
        table.splice(currentIndex, 1);
        this.computeTableTotalAmount();
         handleEmit(null, () => {
           this.emitToParent();
         });
      }
    },

    computeTableTotalAmount(){
        let total = 0;
        this.bdp_table1.forEach(item => {
            let temp = Number(item.bdp_table1_lineAmount);
            temp = Number.isNaN(temp) ? 0 :  temp;
            total += temp;
        });
        this.bdp_table1_amount = toFixed(total);
    }
  },

  mounted(){
  },

  updated(){

  },

  watch: {
      datas(newValue, oldValue){
          this.keys.forEach(key => {
              this[key] = _.cloneDeep(newValue[key]);
          });
      }
  },

  props: {
    datas: {
      type: Object,
      required: true
    },
    bus: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    }
  },
  data() {
      return {
        id: '',
        formInstId: '',
        bpn_no: '',
        bpn_date: '',
        bpn_buyerName: '',
        bpn_buyerAddress: '',

        bpn_table1: [{
            bpn_table1_product: '',
            bpn_table1_description: '',
            bpn_table1_price: '',
            bpn_table1_quantity: '',
            bpn_table1_lineAmount: ''
        }],

        bpn_table1_amount: '',

        bpn_depositMoney: 0, //定金
        bpn_balanceMoney: 0, //尾款

        bpn_paidDeposit: 0, //已支付货款
        bpn_unpaidBalance: 0, //未支付
        bpn_payDeadline: '', //支付日期

       

        bpn_beneficiary: 'BIZOE INTERNATIONAL GROUP LIMITED',
        bpn_companyAddress: 'UNIT 04,7/F BRIGHT WAY TOWER NO.33 MONG KOK RD KL',
        bpn_beneficiaryBankName: 'CHINA ZHESHANG BANK BEIJING BRANCH',
        bpn_bankAccount:'NRA1000000011420100046799',
        bpn_bankAddress: 'NO.1 FINANCIAL STEREET,XICHENG DISTRICT,BEIJING,CHINA',
        bpn_swiftBic:'ZJCBCN2N',

        keys: [
        "id",
        "formInstId",
        'bpn_no',
        'bpn_date',
        'bpn_buyerName',
        'bpn_buyerAddress',
        'bpn_table1',
        'bpn_table1_amount',
        'bpn_depositMoney',
        'bpn_balanceMoney',
        'bpn_paidDeposit',
        'bpn_payDeadline',
        'bpn_beneficiary',
        'bpn_companyAddress',
        'bpn_beneficiaryBankName',
        'bpn_bankAccount',
        'bpn_bankAddress',
        'bpn_swiftBic'
        ],
        prevMapCur: {
            "bf_table1_product": "bpn_table1_product",
            'bf_table1_description': "bpn_table1_description",
            'bf_table1_price': "bpn_table1_price",
            'bf_table1_lineAmount': "bpn_table1_lineAmount",
            'bf_table1_quantity': "bpn_table1_quantity"
        }
      }
  },
  components: {
     exportExcel
  }
}
</script>

<style lang="scss">


.paymentnotice {
    padding: 20px;
    border: 1px solid #999;


    .relate-color {
      // background-color: #efa54b36 !important;

      input {
        background-color: transparent !important;
      }
   }

    .select-currency {
      select {
        margin-left: 12px;
        height: 30px;
        width: 60px;
      }
    }
    .head {
      > h2 {
        text-align: center;
      }
      .head-ctrl {
        height: 60px;
        .order-number {
          padding: 16px 0px;
          float: left;
        }
        button {
          float: right;
        }
      }

      .head-number {
        .el-input {
          width: 400px;
        }
      }
    }

    .head-1 {
      text-align: center;
      padding: 20px;
      position: relative;
      .tcf-png {
        position: absolute;
        width: 90px;
        left: 48px;
        top: 6px;
      }
    }

    .contract {
      >h1 {
        text-align: center;
      }

     .address-input {
        width: 94%;
        border: 1px solid #999;
        height: 32px;
        border-radius: 4px;
        padding-left: 10px;
    }
     .contract-seller{
        p {
            > span {
              font-weight: bolder;
              padding-right: 20px;
            }
        }
     }

      .contract-order {
          float: right;
      }

      .contract-seller {
        >p {
          >span {
            font-weight: bolder;
          }
          margin-bottom:20px;
        }
      }

    }

    .table {
        margin-top: 20px;

        th {
            text-align: center;
            padding-bottom: 0;
            padding-top: 0;
        }

        td {
           border: 1px solid #e6ebf5;
        }
        .el-table__body-wrapper {
            overflow: hidden;
        }

         .cell {
            height: 100%;
        }

        .cell-edit-input {
            display: block;
            width: 100%;
            height: 100%;

            input {
              width: 100%;
              height:100%;
              border: none;
              outline: none;
               background-color: transparent;
            }
        }
              

        .table-title {
            font-weight: bolder;
        }
    }

    .extra-table {
          .extra-money {

            .el-col {
              height: 40px;
              line-height: 40px;
            }

            border: 1px solid #e6ebf5;
            text-align: center;
            color: #5a5e66;

            &:nth-child(1){
              border-top: none;
            }

            .el-col:nth-child(2){
              border-left: 1px solid #e6ebf5;
              border-right: 1px solid #e6ebf5;
            }

            input {
              width: 90%;
              height: 90%;
              border: none;
              outline: none;
              text-indent: 1em;
              color: #5a5e66;
            }
          }
    }

    .other {
        margin-bottom: 30px;

        .other-time {
            .el-col {
                height: 40px;
            }
        }

        .el-col {
            >span {
                display: inline-block;
                height: 30px;
                line-height: 30px;
            }
        }

        .el-row {
            margin-bottom: 10px;
        }

        .el-row:not(.other-time){
           input {
             width: 100%;
             height: 30px;
             border:  1px solid #e6ebf5;
             border-radius: 2px;
             outline: none;
             background-color: transparent;
            }
        }


        p {
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            font-weight: bolder;
        }

    }

    
    .upload {
      >div {
        border: 1px solid #999;
        padding: 20px 0px 40px 20px;
      }

      .upload-btn {
        position: relative;
        >input {
          opacity: 0;
          width: 100px;
          height: 40px;
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      .upload-files {

          > li {
              width: 300px;
              padding: 10px 0;
              transition: all 0.5s linear;

              &:hover {

                >span {
                  color: #409EFF;
                }
              }
            }

          font-size: 16px;
          span {
              padding: 0 10px;
              cursor: pointer;
              display: inline;
          }
          span.el-icon-close:hover {
              cursor: pointer;
          }
      }
      .upload-hint {
        font-size: 20px;
        margin-bottom: 10px;
      }
    }
}
</style>


